/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    ScrollView,
    Animated
} from 'react-native';

let self = null;

const iconBoxHeight = layout.height(270) - layout.GAP_VERTICAL_LARGE;
const iconBoxWidth = (layout.MAX_WIDTH - layout.GAP_HORIZONTAL_LARGE * 2) / 3;

export default class DemandStateView extends React.Component {

    static propTypes = {
        icons: React.PropTypes.array.isRequired,
        activeIndex: React.PropTypes.number
    }

    static defaultProps = {
        active: 0
    }

    constructor(prop) {
        super(prop);
        self = this;
        this.state = {};
        this.props.icons.map((item, index) => {
            this.state['icon_' + index] = new Animated.Value(0)
        })
    }

    componentDidMount() {
        setTimeout(() => {
            self.toggle(self.props.activeIndex);
        }, 200);
    }

    toggle(index) {
        if (index < self.props.icons.length && self.props.icons) {
            self.refs.state_scroll.scrollTo({
                x: index * iconBoxWidth
            });
            let animates = [];
            for (let i = 0; i < self.props.icons.length; i++) {
                animates.push(
                    Animated.timing(self.state['icon_' + i], {
                        duration: 300,
                        toValue: i === index ? 1 : 0
                    })
                )
            }
            Animated.parallel(animates).start();
        }
    }

    render() {

        return (
            <Image resizeMode={'contain'}
                   source={require('../sources/image_demand_banner.png')}
                   style={styles.container}>
                <ScrollView
                    ref="state_scroll"
                    scrollEnabled={false}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    style={styles.box}>
                    <View style={styles.iconBox}/>
                    {
                        this.props.icons.map((item, index) => {
                            return (
                                <View key={index} style={[base.rowCC, styles.iconBox]}>
                                    <Animated.Image
                                        source={item}
                                        style={[styles.icon, {
                                            transform: [
                                                {
                                                    scale: this.state['icon_' + index].interpolate({
                                                        inputRange: [0, 1],
                                                        outputRange: [0.5, 1]
                                                    })
                                                }
                                            ]
                                        }]}
                                        resizeMode={'contain'}/>
                                </View>
                            )
                        })
                    }
                    <View style={styles.iconBox}/>
                </ScrollView>
            </Image>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: layout.MAX_WIDTH,
        height: layout.height(270),
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingBottom: layout.GAP_VERTICAL_MID,
        backgroundColor: layout.MAIN_AUX_COLOR,
        overflow: 'hidden'
    },
    box: {
        flex: 1,
        alignSelf: 'stretch'
    },
    iconBox: {
        width: iconBoxWidth,
        // height: iconBoxHeight
    },
    icon: {
        width: layout.width(100),
        height: layout.height(301)
    },
})